<template>
  <div>
    <baseContainer title="基础用法 禁用">
      <x-row :gutter="20">
        <x-col :span="12"><x-input></x-input></x-col>
        <x-col :span="12"><x-input disabled></x-input></x-col>
      </x-row>
    </baseContainer>
    <baseContainer title="一键清空">
      <x-input v-model="inputValue" clearable></x-input>
    </baseContainer>
    <baseContainer title="左右图标">
    <x-row :gutter="20">
      <x-col :span="12"><x-input prefix-icon="x-icon-sousuo"></x-input></x-col>
      <x-col :span="12"><x-input suffix-icon="x-icon-rili"></x-input></x-col>
    </x-row>
    </baseContainer>
    <baseContainer title="复合型输入框">
      <x-input>
        <template #prepend>https://</template>
      </x-input>
      <br>
      <x-input>
        <template #append>.com</template>
      </x-input>
      <br>
      <x-input>
        <template #prepend>
          <x-select v-model="select" placeholder="Select" style="width: 115px">
          <x-option label="Restaurant" value="1" />
          <x-option label="Order No." value="2" />
          <x-option label="Tel" value="3" />
        </x-select>
        </template>
        <template #append>
        <x-button icon="x-icon-sousuo" />
      </template>
      </x-input>
      <br>
      <x-input>
        <template #prepend>
          <x-button icon="x-icon-sousuo" />
        </template>
        <template #append>
          <x-select v-model="select" placeholder="Select" style="width: 115px">
          <x-option label="Restaurant" value="1" />
          <x-option label="Order No." value="2" />
          <x-option label="Tel" value="3" />
        </x-select>
      </template>
      </x-input>
    </baseContainer>
    <baseContainer title="限制长度">
    <x-textarea v-model="value"></x-textarea>
    <!-- <span>{{ value }}</span> -->
  </baseContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import baseContainer from './baseContainer.vue'
export default defineComponent({
  components: {
    baseContainer
  },
  setup () {
    const value = ref('')
    const select = ref('')
    const inputValue = ref('1')
    return {value,select,inputValue}
  }
})
</script>

<style scoped>

</style>